<template>
	<view>
		<view class="main">
			<view class="mod info-sec">
				<view class="title">佛山大良保利广场充电站</view>
				<view class="flex">
					<view class="bh">
						<text class="wz1">编号</text>
						<text class="wz2">CDZ00001</text>
					</view>
				</view>
				<view class="address">
					广东省佛山市顺德区观绿路3号保利广场停车场
					<view class="navi">
						<image src="../../static/images/icon_09.png" class="ico" mode="widthFix"></image>导航
					</view>
				</view>
			</view>
			<view class="mod cost-sec">
				<view class="t-tit">费用说明</view>
				<view class="table">
					<view class="thead">
						<view class="tr">
							<view class="th w1">充电时段</view>
							<view class="th w2">普通价(元/度)</view>
							<view class="th w3" style="color:#924E2E;font-weight: bold;">会员价(元/度)</view>
						</view>
					</view>
					<view class="tbody">
						<view class="tr cur">
							<view class="td w1">
								<text class="tag">当前时段</text>
								<text class="time">10:00-12:00</text>
							</view>
							<view class="td w2">
								<text class="price1">1.53</text>
							</view>
							<view class="td w3">
								<view class="price2">
									<text>1.44</text> 起
								</view>
								<image src="../../static/images/icon_10.png" class="kt" mode="widthFix"></image>
							</view>
						</view>
						<view class="tr">
							<view class="td w1">
								<text class="time">12:00-14:00</text>
							</view>
							<view class="td w2">
								<text class="price1">0.94</text>
							</view>
							<view class="td w3">
								<view class="price2">
									<text>0.88</text> 起
								</view>
							</view>
						</view>
						<view class="tr">
							<view class="td w1">
								<text class="time">14:00-19:00</text>
							</view>
							<view class="td w2">
								<text class="price1">1.53</text>
							</view>
							<view class="td w3">
								<view class="price2">
									<text>1.44</text> 起
								</view>
							</view>
						</view>

					</view>
				</view>
				<view class="center">
					<view class="readmore" @click="priceshow = true">
						全部时段 <image src="../../static/images/icon_08.png" class="arr" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="mod gk-sec">
				<view class="t-tit">充电桩概览</view>
				<view class="top">
					<view class="flex flex-align-center flex-1">
						<image src="../../static/images/icon_11.png" class="ico" mode="widthFix"></image>
						<view class="txt">
							空闲 <view>3<text>/5</text></view>
						</view>
					</view>

					<text class="wz">最高功率500kW</text>
				</view>
				<view class="list">
					<view class="item">
						<view class="circle">
							<u-circle-progress active-color="#2DC5AA" :percent="100" width="140" borderWidth="6">
								<view class="percentbox">
									<text class="percent" style="color:#2DC5AA;font-size:28rpx;">空闲</text>
								</view>
							</u-circle-progress>
						</view>

						<view class="flex-1">
							<view class="title">1号枪桩</view>
							<view class="fz">
								<text>充电枪编号：</text>CDZ00001
							</view>
							<view class="fz">
								<text>最大功率：</text>500kW
							</view>
						</view>
					</view>
					<view class="item">
						<view class="circle">
							<u-circle-progress active-color="#FE4501" :percent="50" width="140" borderWidth="6">
								<view class="percentbox">
									<text class="percent">50%</text>
								</view>
							</u-circle-progress>
						</view>

						<view class="flex-1">
							<view class="title">1号枪桩</view>
							<view class="fz">
								<text>充电枪编号：</text>CDZ00001
							</view>
							<view class="fz">
								<text>最大功率：</text>500kW
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="di-sec">
				<view class="flex-1">
					<view class="du">
						<text class="wz1">￥</text>
						<text class="wz2">1.53</text>
						/度
					</view>
					<view class="font">当前时段 10:00~12:00</view>
				</view>
				<button class="submit" @click="tipshow = true">扫码充电</button>
			</view>
		</view>

		<!-- 余额不足弹窗 -->
		<u-popup v-model="tipshow" border-radius="20" mode="bottom">
			<view class="pop-tip">
				<image src="../../static/images/icon_12.png" class="icon" mode="heightFix"></image>
				<view class="title">余额不足10元</view>
				<view class="txt">余额最低需要10元才可进行充电</view>
				<navigator url="" hover-class="none" class="link this">去充值</navigator>
				<view class="link" @click="tipshow = false">取消</view>
			</view>
		</u-popup>

		<!-- 价格详情弹窗 -->
		<u-popup v-model="priceshow" border-radius="20" mode="bottom">
			<view class="pop-jg">
				<view class="close" @click="priceshow = false">
					<u-icon name="close" color="#3B3948" size="28"></u-icon>
				</view>
				<view class="t-tit">价格详情</view>
				<view class="table">
					<view class="thead">
						<view class="th w1">充电时段</view>
						<view class="th w2">类型</view>
						<view class="th w3"><text style="padding-left:10rpx;">价格</text>(元/度)</view>
						<view class="th w4">
							=
						</view>
						<view class="th w5"><text style="padding-left:10rpx;">电费</text>(元/度)</view>
						<view class="th w6">
							+
						</view>
						<view class="th w7"><text>服务费</text>(元/度)</view>
					</view>
					<view class="tbody">
						<view class="tr cur">
							<text class="tag">当前时段</text>
							<view class="td w1">
								00:00-08:00
							</view>
							<view class="td w2">
								<view class="fz">普通价</view>
								<view class="fz">会员价</view>
							</view>
							<view class="td w3">
								<view class="price1">0.57</view>
								<view class="price2">
									<text>0.57</text> 起
								</view>
							</view>
							<view class="td w4">
								<view class="fz1">0.29</view>
								<view class="fz2">
									<text>0.29</text> 起
								</view>
							</view>
							<view class="td w5">
								<view class="fz1">0.28</view>
								<view class="fz2">
									<text>0.21</text> 起
								</view>
							</view>
						</view>
						<view class="tr" v-for="item in 2">
							<view class="td w1">
								00:00-08:00
							</view>
							<view class="td w2">
								<view class="fz">普通价</view>
								<view class="fz">会员价</view>
							</view>
							<view class="td w3">
								<view class="price1">0.57</view>
								<view class="price2">
									<text>0.57</text> 起
								</view>
							</view>
							<view class="td w4">
								<view class="fz1">0.29</view>
								<view class="fz2">
									<text>0.29</text> 起
								</view>
							</view>
							<view class="td w5">
								<view class="fz1">0.28</view>
								<view class="fz2">
									<text>0.21</text> 起
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="tips">
					<image src="../../static/images/icon_06.png" class="ico" mode="widthFix"></image>
					<text class="flex-1">
						由于服务运营成本及电价峰平谷浮动，充电服务采用分时段计费，不同枪功率存在定价差异
					</text>
				</view>


			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tipshow: false,
				priceshow: false
			}
		},
		onShow() {

		},
		onLoad() {

		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	@import url(@/batteryCharging/static/css/common.scss);

	.main {
		padding: 20rpx 20rpx 140rpx;

		.mod {
			padding: 25rpx 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.t-tit {
				font-size: 32rpx;
				color: #262626;
				font-weight: 700;
				margin-bottom: 25rpx;
			}
		}

	}

	.info-sec {

		.title {
			font-size: 32rpx;
			color: #262626;
			font-weight: 700;
		}

		.bh {
			margin-top: 10rpx;
			overflow: hidden;
			display: flex;

			.wz1 {
				font-size: 22rpx;
				font-weight: 700;
				color: #fff;
				width: 66rpx;
				height: 36rpx;
				text-align: center;
				line-height: 36rpx;
				background: linear-gradient(90deg, #FF864A 0%, #F93701 100%);
				border-radius: 4rpx;
				position: relative;
				z-index: 2;
			}

			.wz2 {
				font-size: 24rpx;
				color: #FE5E10;
				padding: 0 15rpx 0 25rpx;
				margin-left: -10rpx;
				line-height: 30rpx;
				border: 1rpx solid #FE5E10;
				border-radius: 4rpx;
			}
		}

		.address {
			font-size: 24rpx;
			color: #999999;
			margin-top: 8rpx;

			.navi {
				font-size: 20rpx;
				color: #4073FA;
				border-radius: 200rpx;
				background: #E8F3FF;
				width: 92rpx;
				height: 36rpx;
				line-height: 36rpx;
				padding: 0 4rpx;
				margin-left: 10rpx;
				display: inline-block;
				vertical-align: middle;

				.ico {
					width: 28rpx;
					height: 28rpx;
					margin-right: 6rpx;
					display: inline-block;
					vertical-align: middle;
				}
			}
		}
	}

	.cost-sec {
		.table {
			.w1 {
				margin-right: 10rpx;
				width: 28%;
				background: #f9f9f9;
			}

			.w2 {
				margin-right: 10rpx;
				width: 30%;
				background: #f9f9f9;
			}

			.w3 {
				flex: 1;
				overflow: hidden;
				background: linear-gradient(90deg, #FEEBD0 0%, #FFF9F1 100%);
			}

			.th,
			.td {
				border-radius: 6rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;
			}

			.thead {}

			.th {
				color: #262626;
				padding: 15rpx 0 15rpx 15rpx;
			}

			.tr {
				margin-bottom: 20rpx;
				display: flex;
			}

			.td {
				padding: 10rpx 0 10rpx 15rpx;
				position: relative;

				.price1 {
					text-align: right;
				}
			}

			.tag {
				font-size: 20rpx;
				color: #fff;
				background: #FE5E10;
				border-radius: 6rpx 6rpx 6rpx 0;
				line-height: 30rpx;
				padding: 0 10rpx;
				position: absolute;
				left: 0;
				top: -8rpx;

			}

			.time {
				color: #706F75;
			}

			.price1 {
				color: #262626;
				font-weight: 500;
			}

			.price2 {
				font-size: 18rpx;
				color: #924E2E;
				font-weight: 700;
				display: inline-block;
				vertical-align: middle;

				text {
					font-size: 26rpx;
					font-family: 'Arial';
				}
			}

			.kt {
				width: 110rpx;
				display: inline-block;
				vertical-align: middle;
				margin-left: 6rpx;
			}

			.cur {
				.price1 {
					font-size: 44rpx;
					color: #FE5E10;
					font-weight: 700;
				}

				.price2 {
					font-size: 20rpx;

					text {
						font-size: 44rpx;
					}
				}

				.td {
					padding-top: 28rpx;
					padding-bottom: 28rpx;
				}


			}

		}

		.readmore {
			font-size: 24rpx;
			color: #666666;
			line-height: 38rpx;
			display: inline-block;
			vertical-align: middle;
			margin-top: 10rpx;

			.arr {
				width: 9rpx;
				margin-left: 7rpx;
				display: inline-block;
				vertical-align: middle;
			}
		}
	}

	.gk-sec {
		padding-bottom: 0;

		.top {
			height: 84rpx;
			border-radius: 8rpx;
			background: #FFF7F2;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 25rpx;

			.ico {
				width: 68rpx;
				margin-right: 12rpx;
			}

			.txt {
				font-size: 22rpx;
				color: #262626;
				font-weight: 700;
				display: flex;
				align-items: center;

				view {
					font-size: 36rpx;
					font-weight: 700;
					margin-left: 8rpx;
					font-family: 'Arial';
				}

				text {
					color: #9D9AA3;
				}
			}

			.wz {
				font-size: 22rpx;
				color: #FE5E10;
			}
		}

		.list {
			.item {
				padding: 30rpx 0;
				border-bottom: 1px solid #F0F0F0;
				display: flex;
				align-items: center;

				&:last-child {
					border: 0;
				}

				.circle {
					margin-right: 22rpx;
				}


				.percentbox {
					display: flex;
					align-items: center;
					justify-content: center;
				}


				.percent {
					font-size: 32rpx;
					color: #FE4501;
					font-weight: 700;
					font-family: 'Arial';
				}

				.title {
					font-size: 32rpx;
					color: #262626;
					font-weight: 700;
					margin-bottom: 10rpx;
				}

				.fz {
					font-size: 24rpx;
					color: #666666;
					line-height: 1.5;

					text {
						color: #999;
					}
				}
			}
		}
	}

	.di-sec {
		background-color: #fff;
		padding: 25rpx 35rpx;
		display: flex;
		align-items: center;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		height: 140rpx;



		.du {
			font-size: 20rpx;
			color: #FE5E10;

			.wz1 {
				font-size: 26rpx;
				font-weight: bold;
			}

			.wz2 {
				font-size: 46rpx;
				font-weight: 700;
				font-family: 'Arial';
				margin-top: 8rpx;
			}

		}

		.font {
			font-size: 24rpx;
			color: #999999;
		}

		.submit {
			font-size: 28rpx;
			color: #fff;
			width: 180rpx;
			line-height: 78rpx;
			height: 78rpx;
			text-align: center;
			border-radius: 12rpx;
			background: linear-gradient(124.39deg, #FE5E10 0%, #FF8045 99.31%);
			border: 0;
		}
	}

	.pop-tip {
		padding: 65rpx 50rpx 50rpx;
		background: linear-gradient(180deg, #FEEDE1 0%, #FFFFFF 100%);

		.icon {
			height: 214rpx;
			display: block;
			margin: 0 auto;
		}

		.title {
			font-size: 36rpx;
			color: #333333;
			font-weight: bold;
			text-align: center;
			margin-top: 45rpx;
		}

		.txt {
			font-size: 26rpx;
			color: #7C8386;
			margin: 10rpx 0 50rpx;
			text-align: center;
		}

		.link {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 92rpx;
			border-radius: 8rpx;

			&.this {
				background: linear-gradient(124.39deg, #FE5E10 0%, #FF8045 99.31%);
				color: #fff;
			}
		}
	}

	.pop-jg {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx;
		position: relative;

		.close {
			position: absolute;
			right: 30rpx;
			top: 25rpx;
		}

		.t-tit {
			font-size: 32rpx;
			color: #262626;
			font-weight: bold;
			text-align: center;
			margin-bottom: 40rpx;
		}

		.tips {
			display: flex;
			align-items: flex-start;
			font-size: 22rpx;
			color: #999999;
			line-height: 34rpx;
			margin-top: 25rpx;

			.ico {
				width: 22rpx;
				margin: 4rpx 12rpx 0 0;
			}
		}

		.table {
			max-height: 65vh;
			overflow-y: scroll;

			view,
			text {
				font-family: 'Arial';
				line-height: 1.6;
			}

			.w1 {
				width: 24%;
			}

			.w2 {
				width: 18%;
			}

			.w3 {
				width: 16%;
			}

			.w4 {
				width: 7%;
			}

			.w5 {
				width: 14%;
			}

			.w6 {
				width: 5%;
			}

			.w7 {
				width: 16%;
			}

			.th,
			.td {
				font-size: 24rpx;
				color: #666;
			}

			.thead {
				display: flex;
				align-items: center;
				margin-bottom: 25rpx;

				.th {
					line-height: 28rpx;
					padding-left: 15rpx;

					text {
						display: block;
					}
				}

				.w4,
				.w6 {
					padding: 0;
					text-align: center;
				}
			}

			.tbody {
				.w3 {
					width: 23%;
				}

				.w4 {
					width: 19%;
				}

				.w5 {
					width: 16%;
				}

				.tr {
					margin-bottom: 30rpx;
					display: flex;
					align-items: center;
					background-color: #f9f9f9;
				}

				.td {
					padding: 14rpx 0 14rpx 15rpx;
				}

				.price1 {
					font-size: 28rpx;
					color: #262626;
					font-weight: 700;
				}

				.price2 {
					font-size: 18rpx;
					color: #924E2E;

					text {
						font-size: 28rpx;
						font-weight: 700;
					}
				}

				.fz1 {
					font-size: 24rpx;
					color: #262626;
				}

				.fz2 {
					font-size: 18rpx;
					color: #924E2E;

					text {
						font-size: 24rpx;
					}
				}

				.tr.cur {
					position: relative;
					background-color: #fff8f2;

					.tag {
						font-size: 20rpx;
						color: #fff;
						line-height: 1;
						background: #FE5E10;
						border-radius: 6rpx 6rpx 6rpx 0;
						padding: 7rpx 8rpx;
						display: inline-block;
						vertical-align: middle;
						position: absolute;
						left: 0;
						top: -10rpx;
					}
				}
			}
		}
	}
</style>